<template>
  <div class="sub-title">
    <!--图标-->
    <slot name="icon">
      <div class="vertical-line"></div>
    </slot>
    <!--标题-->
    <slot name="title">
      <div class="title">{{ title }}</div>
    </slot>
    <!--悬浮提示-->
    <slot name="tip" v-if="showTip">
      <el-tooltip
        :placement="tipPosition"
        :content="tipText"
      >
        <i :class="tipIcon" class="tip-icon"></i>
      </el-tooltip>
    </slot>
    <!--按钮工具-->
    <slot name="tools"></slot>
  </div>
</template>

<script>
export default {
  name: "SubTitle",
  props: {
    // 标题
    title: {
      type: String,
      default: `这里导航标题`
    },
    // 是否显示tip提示
    showTip: {
      type: Boolean,
      default: false,
    },
    // tip提示内容
    tipText: {
      type: String,
      default: `这里是标题的解释`
    },
    // tip提示位置
    tipPosition: {
      type: String,
      default: `top`
    },
    // tip提示图标
    tipIcon: {
      type: String,
      default: `el-icon-question`
    },
  },
};
</script>

<style scoped lang="scss">
.sub-title {
  display: flex;
  align-items: center;
  position: relative;

  .vertical-line {
    width: 4px;
    height: 18px;
    border-radius: 10px;
    background-color: #208ef6;
  }

  .title {
    font-size: 15px;
    margin-left: 8px;
    font-weight: 600;
  }
  .tip-icon {
    margin-left: 10px;
    color: #b4b4b6;
    font-size: 15px;
    cursor: pointer;
  }
}
</style>
